<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/addr-page.css">
    <link rel="stylesheet" href="../../css/vant.css">
</head>

<body>
    <div class="app" v-cloak>
        <div class="dizhitianjia">
            <div class="main">
                <van-form :validate-first="true" :show-error-message="false" @submit="submitAddr">
                    <template>
                        <vant-row>
                            <vant-col>
                                <van-field v-model="addrForm.name" label="收货人" placeholder="请输入收货人姓名"
                                    :rules="[{ required: true, message: '请输入收货人姓名' }]" />
                            </vant-col>
                        </vant-row>
                        <vant-row>
                            <vant-col>
                                <van-field v-model="addrForm.phone" type="number" label="手机号码" placeholder="请输入手机号码"
                                    :rules="[{ required: true, message: '请输入手机号码' }]" />
                            </vant-col>
                        </vant-row>
                        <vant-row>
                            <vant-col>
                                <van-field v-model="addrForm.areaName" label="所在地区" readonly format-trigger="onChange"
                                    placeholder="请选择所在地区" @click="goAreaPage"
                                    :rules="[{ required: true, message: '请选择所在地区' }]">
                                </van-field>
                            </vant-col>
                        </vant-row>
                        <vant-row>
                            </vant-col>
                            <vant-col>
                                <van-field class="addr-detail" maxlength="40" v-model="addrForm.address"
                                    label-width="100%" label="详细地址" placeholder="请输入您的收货地址"
                                    :rules="[{ required: true, message: '请输入您的收货地址' }]" />
                            </vant-col>
                        </vant-row>
                        <vant-row class="default-addr">
                            </vant-col>
                            <vant-col>
                                <div class="van-field__label">设为默认地址</div>
                            </vant-col>
                            <vant-col>
                                <van-switch size="18px" v-model="defaultAddr" />
                            </vant-col>
                        </vant-row>
                        <div>
                            <van-button class="submit-addr" round block type="info" native-type="submit">提交</van-button>
                        </div>
                    </template>
                </van-form>
            </div>
        </div>
    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js "></script>
    <script src="../../script/restful.js "></script>
    <script src="../../script/businessCommon.js "></script>
    <script>
        apiready = function () {
            let vm = new Vue({
                el: ".app",
                data() {
                    return {
                        addrForm: {
                            address: "",
                            areaId: "",
                            areaName: "",
                            id: 0,
                            isDefault: false,
                            lat: 0,
                            lng: 0,
                            name: "",
                            phone: ""
                        },
                        title: "",
                        defaultAddr: false
                    }
                },
                created() {
                    
                },
                mounted() {
                    this.addrForm = api.pageParam.addr || {};
                    this.defaultAddr = this.addrForm.isDefault
                    this.title = api.pageParam.status === "add" ? "添加新地址" : "编辑地址"
                    this.addrForm.id = (api.pageParam.addr && api.pageParam.addr.id) || api.pageParam.id
                },
                methods: {
                    submitAddr() {
                        var vm = this;
                        if (this.title === "添加新地址") {
                            this.addrForm.isDefault = vm.defaultAddr
                            mime("addAddr")(this.addrForm, function (ret) {
                                toastMiddle("添加地址成功")
                                api.sendEvent({
                                    name: 'refleshAddr',
                                    extra: {
                                        isReflesh: true
                                    }
                                })
                                setTimeout(() => {
                                    vm.backPage();

                                }, 1000);
                            })
                        } else {
                            mime("editAddr")(this.addrForm, function (ret) {
                                toastMiddle("编辑地址成功")
                                api.sendEvent({
                                    name: 'refleshAddr',
                                    extra: {
                                        isReflesh: true
                                    }
                                })
                                setTimeout(() => {
                                    vm.backPage();
                                }, 1000);
                            })
                        }
                    },
                    backPage() {
                        api.closeWin();
                    },
                    forwardPage(url, relative) {
                        api.openWin({
                            name: url,
                            url: (relative || "") + url + '.html',
                            bounces: false,
                            pageParam: {
                                key: 'value'
                            }
                        });
                    },
                    // 所在地区
                    goAreaPage() {
                        api.openWin({
                            name: 'release_area_select_win',
                            url: '../release/release_area_select_win.html',
                            bounces: false,
                            pageParam: {
                                key: 'value'
                            }
                        });
                    },
                }
            })
            api.addEventListener({
                name: 'release_area_select'
            }, function (ret) {
                var location = ret.value.city.location.split(",")
                vm.addrForm.areaId = ret.value.city.areaId
                vm.$set(vm.addrForm, 'areaName', ret.value.city.name)
                vm.addrForm.lat = location[0]
                vm.addrForm.lng = location[1]
            })
        }
    </script>
</body>

</html>
